<template>
  <div>
    <div class="one">
      <div class="header-top">
        <img src="箭头.png" @click="fun()" />
        <h3>被窝家装</h3>
      </div>

      <div class="header">
        <span>十年品质保证</span>
        <span>施工延期赔付</span>
        <span>施工0增项</span>
      </div>
      <div class="sorts">
        <div class="sort">
          <img src="整装.png" alt />
          <h4>整装套餐</h4>
          <p>标准化施工</p>
        </div>
        <div class="sort" @click="fn()">
          <img src="设计.png" alt />
          <h4>设计半包</h4>
          <p>个性定制服务</p>
        </div>
        <div class="sort">
          <img src="工地.png" alt />
          <h4>在线工地</h4>
          <p>VR工地在线看</p>
        </div>
      </div>
      <div class="banner">
        <img src="banner.png" alt />
      </div>
    </div>

    <!-- 内容分割部分 -->
    <div class="title">
      <h3>整装套餐</h3>
      <p>个性化半包</p>
    </div>
    <div class="banner2">
      <img src="02.png" alt />
    </div>
    <div class="suggest">
      <h5>iNNO俭良套餐</h5>
      <span>温润丨尊重丨适合丨好住</span>
      <a>
        元/m
        <sup>2</sup>
      </a>
      <p>1199</p>
    </div>
    <!-- 商品展示开始 -->
    <div class="ones">
      <Boss />
      <Boss />
      <Boss />
      <Boss />
    </div>
    <div class="td">
      <h3>高质量服务团队</h3>
      <img src="团队.jpg" alt />
    </div>
    <!-- 工地 -->
    <div class="gd">
      <span>在线逛工地</span>
      <p>查看更多工地></p>
    </div>

    <div class="gds">
      <Bossgd />
      <Bossgd />
      <Bossgd />
      <Bossgd />
    </div>
    <!-- 体验店 -->
    <div class="tyd">
      <span>直营体验店</span>
    </div>
    <div class="tydx">
      <Bosstyd />
      <Bosstyd />
      <Bosstyd />
    </div>
    <!-- 底部 -->
    <div class="buttom">
      <button class="but1">预约量房</button>
      <button class="but2">电话咨询</button>
    </div>
  </div>
</template>



<script>
import Boss from "@/components/trim/boss.vue";
import Bossgd from "@/components/trim/boss-gd.vue";
import Bosstyd from "@/components/trim/boss-tyd.vue";
export default {
  components: {
    Boss,
    Bossgd,
    Bosstyd,
  },
  methods: {
    fun() {
      this.$router.push("/home");
    },
    fn() {
      this.$router.push("/plan");
    },
  },
};
</script>

<style scoped>
.one {
  background: #f8f8f8;
  padding-bottom: 5px;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.header-top {
  background: white;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: fixed;
  top: 0;
  padding-right: 40px;
  padding-left: 20px;
}
.header-top h3 {
  text-align: center;
  font-weight: bold;
}
.header-top img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 5px;
}
.header span {
  font-size: 12px;
  margin: 10px;
}
.sorts {
  display: flex;
  justify-content: center;
  text-align: center;
}
.sort {
  background: white;
  width: 90px;
  margin: 5px;
}
.sort img {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.sort h4 {
  font-size: 14px;
  font-weight: bold;
}
.sort p {
  font-size: 12px;
  color: #999999;
}

.banner img {
  width: 90%;
  margin: 10px auto;
}
.title {
  margin-left: 20px;
  display: flex;
}
.title p {
  font-size: 14px;
  margin-left: 10px;
  margin-top: 2px;
}
.banner2 img {
  width: 90%;
  margin: 10px auto;
}
.suggest {
  margin-left: 20px;
}
.suggest span {
  font-size: 12px;
  color: #ab916c;
}
.suggest p {
  float: right;
  font-size: 20px;
  margin-top: -5px;
}
.suggest a {
  float: right;
  margin-right: 20px;
  margin-top: -5px;
  font-size: 12px;
}
.ones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.td h3 {
  margin-left: 20px;
  font-weight: bold;
  margin-top: 20px;
}
.td img {
  width: 100%;
}
.gd {
  width: 100%;
  margin-top: 20px;
}
.gd span {
  margin-left: 20px;
  font-size: 16px;
  font-weight: bold;
}
.gd p {
  float: right;
  font-size: 12px;
  margin-top: 4px;
  margin-right: 20px;
}
.gds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tyd {
  margin-left: 20px;
  margin-top: 20px;
}
.tyd span {
  font-size: 16px;
  font-weight: bold;
}
.tydx {
  height: 600px;
}
.buttom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 80px;
  background: white;
}
.buttom .but1 {
  width: 100px;
  height: 40px;
  background: white;
  border-radius: 5px;
  border: 1px solid black;
  margin-top: 20px;
}
.buttom .but2 {
  margin-left: 10px;
  width: 190px;
  height: 40px;
  background: #222222;
  color: white;
  border-radius: 5px;
  border: 1px solid black;
}
</style>